<script setup lang="ts">
import { ref } from "vue";
import { useNav } from "@/layout/hooks/useNav";

const dialogVisible = ref(false);
const loading = ref(false);
const { versionInfo, fetchVersionInfo } = useNav();

const showSysInfo = () => {
  loading.value = true;
  dialogVisible.value = true;
  fetchVersionInfo().finally(() => {
    loading.value = false;
  });
};

defineExpose({
  showSysInfo
});
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="系统信息"
    width="500px"
    destroy-on-close
  >
    <el-descriptions v-loading="loading" :column="1" border>
      <el-descriptions-item label="版本">
        {{ versionInfo?.version || "N/A" }}
      </el-descriptions-item>
      <el-descriptions-item label="环境">
        {{ versionInfo?.env || "N/A" }}
      </el-descriptions-item>
      <el-descriptions-item label="应用名称">
        {{ versionInfo?.app_name || "N/A" }}
      </el-descriptions-item>
      <el-descriptions-item label="Git信息">
        分支: {{ versionInfo?.extra?.git?.branch || "N/A" }}
        <br />
        提交: {{ versionInfo?.extra?.git?.commit || "N/A" }}
      </el-descriptions-item>
      <el-descriptions-item label="数据库信息">
        主机: {{ versionInfo?.extra?.mysql?.host || "N/A" }}
        <br />
        端口: {{ versionInfo?.extra?.mysql?.port || "N/A" }}
        <br />
        用户: {{ versionInfo?.extra?.mysql?.user || "N/A" }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style scoped>
.el-descriptions {
  margin: 1rem 0;
}
</style>
